<template>
  <div class="feedback-page">
    <div class="card header">
      <div class="title">问题反馈</div>
      <div class="subtitle">请尽量详细描述您的问题，便于我们快速定位与修复。</div>
    </div>

    <div class="card form">
      <label class="label">问题描述</label>
      <textarea v-model="description" class="textarea" placeholder="例如：在战斗页面选择技能后无响应，控制台报错..." />

      <label class="label">联系方式（可选）</label>
      <input v-model="contact" class="input" placeholder="邮箱或微信号，方便我们与您沟通" />

      <div class="actions">
        <button class="btn primary" :disabled="submitting || !canSubmit" @click="submit">
          {{ submitting ? '提交中...' : '提交反馈' }}
        </button>
        <button class="btn" @click="back">返回</button>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../src/api/request.js'

export default {
  data() {
    return {
      description: '',
      contact: '',
      submitting: false,
    }
  },
  computed: {
    canSubmit() {
      return this.description && this.description.trim().length >= 10
    }
  },
  methods: {
    async submit() {
      if (!this.canSubmit) {
        alert('请至少填写10个字的详细问题描述')
        return
      }
      this.submitting = true
      try {
        // 后端接口占位，若无后端可先提示成功
        const payload = { description: this.description.trim(), contact: this.contact.trim() }
        try {
          await request.post('/system/bug_report', payload)
        } catch (e) {
          // 若接口不存在，继续走本地成功提示
          console.warn('bug_report 接口不可用，使用本地提示。', e)
        }
        alert('感谢您的反馈！我们会尽快处理。')
        this.back()
      } catch (err) {
        console.error('反馈提交失败', err)
        alert('提交失败，请稍后再试')
      } finally {
        this.submitting = false
      }
    },
    back() {
      window.location.hash = '/pages/main/index'
    }
  }
}
</script>

<style scoped>
.feedback-page {
  padding: 16px;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.header .title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.header .subtitle {
  font-size: 13px;
  color: #666;
  margin-top: 6px;
}

.label {
  font-size: 13px;
  color: #444;
  margin-bottom: 6px;
  display: block;
}

.textarea {
  width: 100%;
  min-height: 140px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 12px;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
}

.btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
</style>